<!--
 * @Description: 悟空软件
 * @Author: 悟空
 * @Date: 2020-05-28 11:47:02
 * @LastEditTime: 2020-07-15 11:55:39
 * @LastEditors: yang
-->
<template>
  <el-form
    ref="form"
    v-bind="$attrs"
    :class="customClass"
    class="wk-form"
    v-on="$listeners"
  >
    <el-form-item
      v-show="item.displayShow == false ? false : true"
      v-for="(item, index) in fieldList"
      :key="index"
      :prop="item.field"
      :class="[item.className || '', `is-${item.formType}`]"
    >
      <template slot="label">
        {{ item.name }}
        <el-tooltip
          v-if="item.tipType == 'tooltip'"
          effect="dark"
          placement="top"
        >
          <div slot="content" v-html="getTips(item)" />
          <i class="wk wk-help wk-help-tips" />
        </el-tooltip>
        <span v-else style="color: #999">
          {{ getTips(item) }}
        </span>
      </template>
      <el-input
        v-if="item.formType == 'Card'"
        v-model="fieldFrom[item.field]"
        :disabled="item.disabled"
        :maxlength="item.maxlength"
        :placeholder="item.placeholder"
        :type="'text'"
        @change="commonChange(item, index, $event)"
      />
      <el-input
        v-if="item.formType == 'text' && item.field != 'threePartOrderNo'"
        v-model="fieldFrom[item.field]"
        :disabled="item.disabled"
        :maxlength="100"
        :placeholder="item.placeholder"
        :type="item.formType"
        @input="commonChange(item, index, $event)"
      />
      <el-input
        v-if="item.formType == 'text' && item.field == 'threePartOrderNo'"
        v-model="fieldFrom[item.field]"
        :disabled="item.disabled"
        :maxlength="100"
        :placeholder="item.placeholder"
        :type="item.formType"
        @change="commonChange(item, index, $event)"
      />
      <el-input
        v-if="item.formType == 'number_input' || item.formType == 'floatnumber'"
        v-model="fieldFrom[item.field]"
        :disabled="item.disabled"
        :maxlength="item.maxlength || 100"
        :placeholder="item.placeholder"
        :type="item.formType"
        oninput="value=value.replace(/[^\d.]/g,'')"
        @input="commonChange(item, index, $event)"
      />
      <el-input
        v-if="isTrimInput(item.formType)"
        v-model.trim="fieldFrom[item.field]"
        :disabled="item.disabled"
        :maxlength="item.maxlength || 100"
        :placeholder="item.placeholder"
        oninput="value=value.replace(/[^\d]/g,'')"
        type="text"
        @input="commonChange(item, index, $event)"
      />
      <!-- <el-input
        v-if="item.formtype=='receivables_plan'"
        v-model.trim="fieldFrom[item.field]"
        :disabled="item.disabled"
        :maxlength="100"
        :placeholder="item.placeholder"
        type="text"
        @input="commonChange(item, index, $event)"
        @value-change="oldChange($event, item, index)"/> -->
      <el-input-number
        v-else-if="item.formType == 'number'"
        v-model="fieldFrom[item.field]"
        :placeholder="item.placeholder"
        :disabled="item.disabled"
        :controls="false"
        @change="commonChange(item, index, $event)"
      />
      <!-- <el-input-number
        v-else-if="item.formType == 'floatnumber'"
        v-model="fieldFrom[item.field]"
        :placeholder="item.placeholder"
        :disabled="item.disabled"
        :controls="false"
        @change="commonChange(item, index, $event)"
      /> -->
      <el-input
        v-else-if="item.formType == 'textarea'"
        v-model="fieldFrom[item.field]"
        :disabled="item.disabled"
        :rows="3"
        :autosize="{ minRows: 3 }"
        :maxlength="item.maxlength || 800"
        :placeholder="item.placeholder"
        :type="item.formType"
        resize="none"
        @input="commonChange(item, index, $event)"
      />

      <!-- <wk-payment-select
        v-else-if="item.field == 'returnType'"
        :formType="item.formType"
        :editVal="fieldFrom[item.field]"
        :disabled="item.disabled"
        @stage="stageChange($event, item, index)"
      /> -->

      <!-- 多级下拉 -->
      <level-select
        v-else-if="item.formType == 'leve_linkage'"
        :value="item.levelData"
        :editVal="fieldFrom[item.field]"
        @stage="stageChange($event, item, index)"
      >
      </level-select>

      <el-select
        v-else-if="['checkbox', 'select'].includes(item.formType)"
        v-model="fieldFrom[item.field]"
        :disabled="item.disabled"
        :clearable="item.clearable"
        :placeholder="item.placeholder"
        :multiple="item.formType === 'checkbox'"
        filterable
        style="width: 100%"
        @change="commonChange(item, index, $event)"
      >
        <el-option
          v-for="(item, index) in item.setting"
          :key="index"
          :label="!isEmptyValue(item.value) ? item.label || item.name : item"
          :value="!isEmptyValue(item.value) ? item.value : item"
        />
      </el-select>
      <el-select
        v-else-if="item.formType == 'checkbox'"
        v-model="fieldFrom[item.field]"
        :disabled="item.disabled"
        :clearable="item.clearable"
        :placeholder="item.placeholder"
        multiple
        style="width: 100%"
        @change="commonChange(item, index, $event)"
      >
        <el-option
          v-for="(item, index) in item.setting"
          :key="index"
          :label="!isEmptyValue(item.value) ? item.label || item.name : item"
          :value="!isEmptyValue(item.value) ? item.value : item"
        />
      </el-select>
      <el-date-picker
        v-else-if="item.formType == 'date'"
        v-model="fieldFrom[item.field]"
        :disabled="item.disabled"
        clearable
        style="width: 100%"
        type="date"
        value-format="yyyy-MM-dd"
        placeholder="选择日期"
        @change="commonChange(item, index, $event)"
      />
      <el-date-picker
        v-else-if="item.formType == 'dateRange'"
        v-model="fieldFrom[item.field]"
        :disabled="item.disabled"
        :type="item.dateType || 'daterange'"
        :value-format="item.dateValueFormat || 'yyyy-MM-dd'"
        clearable
        style="width: 100%"
        start-placeholder="开始日期"
        end-placeholder="结束日期"
        @change="commonChange(item, index, $event)"
      />
      <el-date-picker
        v-else-if="item.formType == 'datetime'"
        v-model="fieldFrom[item.field]"
        :disabled="item.disabled"
        clearable
        style="width: 100%"
        type="datetime"
        value-format="yyyy-MM-dd HH:mm:ss"
        placeholder="选择日期"
        @change="commonChange(item, index, $event)"
      />
      <wk-dep-select
        v-else-if="item.formType == 'structure'"
        v-model="fieldFrom[item.field]"
        :request="item.request"
        :props="item.props"
        :params="item.params"
        :disabled="item.disabled"
        :radio="!isEmptyValue(item.radio) ? item.radio : true"
        style="width: 100%"
        @change="depOrUserChange(item, index, arguments[0], arguments[1])"
      />

      <!-- <wk-user-select
        v-else-if="['single_user', 'user'].includes(item.formType)"
        v-model="fieldFrom[item.field]"
        :request="item.request"
        :props="item.props"
        :isTeacher="item.isTeacher"
        :params="item.params"
        :disabled="item.disabled"
        :radio="!isEmptyValue(item.radio) ? item.radio : true"
        style="width: 100%"
        @change="depOrUserChange(item, index, arguments[0], arguments[1])"
      /> -->

      <user-Select
        v-else-if="
          ['single_user', 'user'].includes(item.formType) && item.radio == false
        "
        v-model="fieldFrom[item.field]"
        :restrictData="item.restrictData"
        style="width:100%;"
        @input="depOrUserChange(item, index, arguments[0], arguments[1])"
      >
      </user-Select>
      <relate-empoyee
        v-else-if="
          ['single_user', 'user'].includes(item.formType) && item.radio == true
        "
        style="width: 100%;"
        :visible="false"
        :show-input="true"
        :isShowName="true"
        :user-id="fieldFrom[item.field]"
        ref="relate_empoyee"
        @save="depOrUserChange(item, index, arguments[0], arguments[1])"
      >
      </relate-empoyee>
      <wk-school-select
        v-else-if="item.formType == 'school_select'"
        :editVal="fieldFrom[item.field]"
        @school="stageChange($event, item, index)"
      />
      <wkstage-select
        v-else-if="['major_select', 'industry_select'].includes(item.formType)"
        :formType="item.formType"
        :editVal="fieldFrom[item.field]"
        @stage="stageChange($event, item, index)"
      />
      <el-radio-group
        v-else-if="item.formType == 'radio'"
        v-model="fieldFrom[item.field]"
        :disabled="item.disabled"
        :placeholder="item.placeholder"
        @change="commonChange(item, index, $event)"
      >
        <el-radio
          v-for="(item, index) in item.setting"
          :key="index"
          :label="!isEmptyValue(item.value) ? item.value : item"
        >
          {{ !isEmptyValue(item.value) ? item.label || item.name : item }}
        </el-radio>
      </el-radio-group>
      <v-distpicker
        v-if="item.formType == 'address'"
        :province="fieldFrom[item.field].province"
        :city="fieldFrom[item.field].city"
        :area="fieldFrom[item.field].area"
        @province="selectProvince($event, item, index)"
        @city="selectCity($event, item, index)"
        @area="selectArea($event, item, index)"
      />
      <xh-files
        v-if="item.formType == 'file'"
        :value="fieldFrom[item.field]"
        :disabled="item.disabled"
        @value-change="oldChange($event, item, index)"
      />
      <template v-else>
        <slot :data="item" :index="index" />
      </template>
    </el-form-item>
    <slot name="suffix" />
  </el-form>
</template>

<script>
import WkstageSelect from "@/components/NewCom/WkstageSelect";
import WkSchoolSelect from "@/components/NewCom/WkSchoolSelect";
import WkUserSelect from "@/components/NewCom/WkUserSelect";
import UserSelect from "@/views/admin/components/UserSelect"; // 人员单选
import RelateEmpoyee from "@/views/admin/components/RelateEmpoyee"; // 人员多选
import WkDepSelect from "@/components/NewCom/WkDepSelect";
import VDistpicker from "@/components/VDistpicker";
import { XhFiles } from "@/components/CreateCom";
import WkPaymentSelect from "@/components/NewCom/WkPaymentSelect";
import LevelSelect from "@/components/NewCom/LevelSelect"; // 多级下拉
import Mixin from "./Mixin";

export default {
  name: "WkForm",
  components: {
    WkUserSelect,
    WkDepSelect,
    VDistpicker,
    XhFiles,
    WkSchoolSelect,
    WkstageSelect,
    WkPaymentSelect,
    UserSelect,
    RelateEmpoyee,
    LevelSelect
  },
  mixins: [Mixin],
  inheritAttrs: false,
  props: {
    fieldFrom: {
      type: Object,
      default: () => {
        return {};
      }
    },
    fieldList: {
      type: Array,
      default: () => {
        return [];
      }
    },
    customClass: {
      type: String,
      default: "is-two-columns"
    }
  },
  data() {
    return {
      instance: null
    };
  },
  computed: {},
  watch: {},
  mounted() {
    this.$nextTick(() => {
      this.instance = this.$refs.form;
    });
    // console.log(this.fieldFrom,'执行')
  },
  beforeDestroy() {},
  methods: {}
};
</script>

<style lang="scss">
@import "@/styles/wk-form.scss";
</style>
<style lang="scss" scoped>
.el-input-number {
  width: 100%;
  /deep/ .el-input__inner {
    text-align: left;
    padding: 0 8px;
  }
}
</style>
